<template>
  <div class="goods-card">
    <!-- 编辑页面组件 -->
    <card-edit
      v-if="isEditShow"
      :row="scopeRow"
      @edit-success="editSuccess"
      @goback="goback"
    />

    <!-- 新增页面组件 -->
    <card-add
      v-else-if="isAddShow"
      :row="scopeRow"
      @add-succsee="addSuccess"
      @back="back"
    />

    <div v-else>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>优惠券管理</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 优惠券管理 卡片区域 -->
      <div class="card-area">
        <span class="card-text">优惠券管理</span>
        <el-card class="card-content">
          <span>优惠券:</span>
          <el-input
            placeholder="请输入内容"
            class="card-input"
            v-model="inputValue"
            @blur="Onblur"
          ></el-input>
          <el-button type="primary" round @click="searchInfo">查询</el-button>
          <el-button
            type="primary"
            class="btn-reset"
            round
            @click="resetInfo"
            :disabled="isShow"
          >
            重置</el-button
          >
        </el-card>
      </div>
      <!-- 新增按钮 -->
      <el-button type="primary" class="btn-add" @click="addCard">
        新增优惠券</el-button
      >
      <!-- 优惠券详情列表 -->
      <el-table style="width: 100%" class="discount-list" :data="cardsList">
        <el-table-column label="序号" prop="id"> </el-table-column>
        <el-table-column label="优惠券名称" prop="title"> </el-table-column>
        <el-table-column label="优惠券金额/元" prop="money"> </el-table-column>
        <el-table-column label="使用金额限制" prop="isno">
          <template slot-scope="scope">
            <span v-if="scope.row.isno === 1">有</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="使用时限/天" prop="days"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="success" round @click="editinfo(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" round @click="deleteCard(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 编辑弹出层 -->

    <!-- <el-dialog title="新增/编辑优惠券" :visible.sync="isDialogShow" width="50%">
      <span>优惠券名称：</span>
      <el-input width='50%'></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="isDialogShow = false"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
  </div>
</template>
<script>
import { getItem, setItem } from '@/api/storages'
import CardEdit from './compontents/card-edit.vue'
import CardAdd from './compontents/card-add.vue'
export default {
  name: 'GoodsCard',
  data() {
    return {
      cardsList: [],
      inputValue: '',
      isShow: false,
      total: 100,
      currentPage: 1,
      pageSize: 10,
      // isDialogShow: false
      isEditShow: false,
      scopeRow: '',
      isAddShow: false
    }
  },
  props: {},
  components: {
    CardEdit,
    CardAdd
  },
  computed: {},
  mounted() {},
  methods: {
    async loadCards() {
      // console.log(this.total)
      const { data } = await this.$http.get('/goods/card')
      // console.log(data)
      this.cardsList = data.data
      this.total = data.total
      // window.localStorage.setItem('Lwj', JSON.stringify(this.cardsList))
      setItem('Lwj', data.data)
      // console.log(JSON.parse(window.localStorage.getItem('Lwj')))
    },
    searchInfo() {
      const data = this.cardsList.filter(item => {
        return item.title.includes(this.inputValue.trim())
      })

      // console.log(data)
      // console.log(typeof data)

      if (data.length === 0) {
        this.$message.error('没有此条信息')
        this.cardsList = []
      }
      this.cardsList = data
      // if (this.data === []) {
      //   console.log(1)
      //   // this.cardsList = data
      // } else if (data && data === []) {
      //   // this.$message('没有此条信息')
      //   console.log(1)
      // }
      this.isShow = false
    },
    resetInfo() {
      this.inputValue = ''
      // if (!this.inputValue) {
      //   return (this.isShow = true)
      // }
      // this.cardsList = JSON.parse(window.localStorage.getItem('Lwj'))
      this.cardsList = getItem('Lwj')

      this.isShow = true
    },
    Onblur() {
      this.cardsList = JSON.parse(window.localStorage.getItem('Lwj'))
    },
    editinfo(row) {
      this.scopeRow = row
      this.isEditShow = true
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.loadCards()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)

      this.currentPage = val
      this.loadCards()
    },
    editSuccess(data) {
      // let newObj = this.cardsList.find(v => v.id === data.id)
      // newObj = data
      // console.log(newObj, 'newObj')
      this.cardsList.find(v => {
        if (v.id === data.id) {
          Object.assign(v, data)
        }
      })
      // // console.log(row)
      // setItem('Lwj', this.cardsList)
      this.isEditShow = false
    },
    addCard() {
      this.isAddShow = true
      this.scopeRow = ''
    },
    addSuccess(data) {
      console.log(data)
      this.cardsList.unshift(data)
      this.isAddShow = false
    },
    goback() {
      this.isEditShow = false
    },
    back() {
      this.isAddShow = false
    },
    deleteCard(row) {
      console.log(1)
      this.scopeRow = row
      const i = this.cardsList.findIndex(item => {
        return item.id === row.id
      })
      console.log(row.id)
      this.cardsList.splice(i, 1)
      console.log(3)
    }
  },
  created() {
    if (getItem('Lwj')) {
      this.cardsList = getItem('Lwj')
    } else {
      this.loadCards()
    }
  },
  watch: {}
}
</script>
<style lang="less" scoped>
.goods-card {
  .card-area {
    margin-top: 20px;
    .card-content {
      margin-top: 10px;
    }
    .card-input {
      width: 500px;
      margin-left: 20px;
      margin-right: 300px;
    }
    .btn-reset {
      margin-left: 50px;
    }
  }
  .btn-add {
    margin-top: 20px;
  }
  .discount-list {
    margin-top: 20px;
  }
  .card-page {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
